<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单控件绑定</title>
		<script src="lib/vue.js"></script>
	</head>
	<body>
		<!--多选框-->
		<div id="check">
			<input type="checkbox" name="jack" id="jack" value="jack" v-model="checkedNames"/>
			<label for="jack">jack</label>
			<input type="checkbox" name="john" id="john" value="john" v-model="checkedNames"/>
			<label for="john">john</label>
			<input type="checkbox" name="mike" id="mike" value="mike" v-model="checkedNames"/>
			<label for="mike">mike</label>
			<br />
			<span>Checked names:{{checkedNames}}</span>
		</div>
			<br />
		
			<br />
		
			<br />
		
		<!--选择列表-->
		<div id="select">
			<select name="" v-model="selected" multiple>
				<option value="A">A</option>
				<option value="B">B</option>
				<option value="C">C</option>
			</select>
			<span>Selected:{{selected}}</span>
		</div>
			<br />
		
			<br />
		
			<br />
		
		<!--动态渲染 用v-for渲染-->
		<div id="dfor">
			<select v-model="dford">
				<option v-for="option in options" v-bind:value="option.value">
					{{option.text}}
				</option>
			</select>
			<span>Selected:{{dford}}</span>
		</div>
	</body>
	<script type="text/javascript">
		var check=new Vue({
			el:"#check",
			data:{
				checkedNames:[]
			}
		});
		
		var select=new Vue({
			el:"#select",
			data:{
				selected:''
			}
		});
		
		var dFor=new Vue({
			el:"#dfor",
			data:{
				dford:'A',
				options:[
				    {text:'one',value:'A'},
				    {text:'two',value:'B'},
				    {text:'three',value:'C'}
				]
			}
		});
	</script>
</html>
